<template>
  <div class="policy">
    <div :class="data.status==='有效'?'policy-status status-effective':data.status==='暂停'?'policy-status status-repeal':data.status==='废止'?'policy-status status-suspend':'policy-status status-effecting'">{{data.status}}</div>
    <div class="policyInfo">
      <img v-if="data.itemTypeId==='1'" src="../../assets/image/ziyuan.jpg"/>
      <img v-if="data.itemTypeId==='2'" src="../../assets/image/rongyubiaozhang.jpg"/>
      <img v-if="data.itemTypeId==='3'" src="../../assets/image/rongyubang.jpg"/>
      <img v-if="data.itemTypeId==='4'||data.itemTypeId===null" src="../../assets/image/gengduo@2x.png"/>
      <img v-if="data.itemTypeId==='5'" src="../../assets/image/tuijian.jpg"/>
      <img v-if="data.itemTypeId==='6'" src="../../assets/image/guanli.jpg"/>
      <img v-if="data.itemTypeId==='7'" src="../../assets/image/difangzixun.jpg"/>
      <div class="policyData" @click="goDetailPage(data.id, searchType)">
        <p><span style="color:#2385F0;font-weight:700">名称</span>：<span v-html="hightLight(searchStore.searchValue,data.title)"></span></p>
        <p><span style="color:#2385F0;font-weight:700">类型</span>：{{data.itemType}}</p>
        <p><span style="color:#2385F0;font-weight:700">主管</span>：{{data.orgName}}</p>
        <p><span style="color:#2385F0;font-weight:700">范围</span>：{{data.area}}</p>
        <p><span style="color:#2385F0;font-weight:700">政策利好</span>：{{data.benefits}}</p>
      </div>
    </div>
    <div class="handle-icons" @click.stop>
        <div
          class="share icon cursor-pointer"
          @click="handleIconClick('share')"
        >
          <svg-icon name="share" size="18px" />
          <span>分享</span>
        </div>
        <div class="view icon">
          <svg-icon name="view" size="24px" />
          <span>{{ cardInfo.vierNum }}</span>
        </div>
        <div class="love icon" @click="handleIconClick('love')">
          <svg-icon
            name="love"
            size="20px"
            :color="cardInfo.isLike * 1 ? 'red' : '#bcc1cb'"
          />
          <span>{{ cardInfo.likeNum }}</span>
        </div>
        <div class="favorite icon" @click="handleIconClick('favorite')">
          <svg-icon
            name="favorite"
            size="22px"
            :color="cardInfo.isCollect * 1 ? '#f2ea57' : '#bcc1cb'"
          />
          <span>{{ cardInfo.collectNum }}</span>
        </div>
    </div>
  </div>
</template>

<style scoped lang="postcss">
.policy{
  background-color: #fff;
  width: 30vw;
  min-width: 360px;
  height: 200px;
  display: flex;
  justify-content: center;
  position: absolute;
  flex-direction: column;
  border-radius: 5px;
  position: relative;
  align-items: center;
  margin: 15px;
  .policy-status{
    position: absolute;
    top:0;
    left:0;
    border-radius: 5px 0 0 0;
    color:#fff;
    height:25px;
    width:50px;
    text-align: center;
    line-height:25px;
  }
  .status-effecting{
    background-color:#0ab10a;
  }
  .status-effective{
    background-color:#F56C6C;
  }
  .status-repeal{
    background-color:#909399;
  }
  .status-suspend{
    background-color:#E6A23C;
  }
  .policyInfo{
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content:space-around;
    align-items: center;
    img{
      height: 100px;
      width: 100px;
    }
    .policyData{
      width: 70%;
      cursor: pointer;
      p{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
    .handle-icons {
    white-space:nowrap;
    margin-top: 12px;
    @apply flex items-center;
    .icon {
      @apply flex items-center;
      span {
        @apply ml-2;
      }
    }
    .love,
    .view,
    .share {
      @apply mr-4;
    }
  }
}

</style>

<script setup lang="ts">
import { computed } from "vue";
import {usePoclicyHooks} from './hook'
import { hightLight  } from '@/utils/index'
import { useSearchStore } from "../../store/search";
const searchStore = useSearchStore()

const props = defineProps(["data"]);
const contentList = computed(() => props.data.map((result) => hightLight(result)));

const { cardInfo,handleIconClick,goDetailPage,searchType } = usePoclicyHooks(props);

defineExpose({ cardInfo });
</script>
